<template>
  <div id="createmain">
    <ul>
      <li v-for="(value,key,index) in booklists" :key="index">
        <img @touchstart="gomylist" :src="value.img" alt />
        <div>
          <p @touchstart="gomylist">{{value.name}}</p>
          <p @touchstart="gomylist">共{{value.num}}本</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      booklists: {
        booklist1: {
          name: "必读的100本书",
          num: 5,
          img: require("@/assets/书架/u4267.png")
        }
      }
    };
  },
  methods:{
    gomylist(){
        
    }
  }
};
</script>

<style lang="less" scoped>
#createmain {
  ul {
    box-sizing: border-box;
    list-style: none;
    padding-top:1rem ;
    li {
      display: flex;
      margin-bottom: 1.5rem;
      div {
        margin-top: .5rem;
        margin-left: 1rem;
        p {
          &:first-of-type {
            font-family: "PingFangSC-Semibold", "PingFang SC Semibold",
              "PingFang SC";
            font-weight: 650;
            font-style: normal;
            font-size: 1.5rem;
            color: #2b3133;
            text-align: left;
            margin-bottom: 1rem;
          }
          &:last-of-type {
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            font-style: normal;
            font-size: 1.2rem;
            color: #95a1a6;
            text-align: left;
          }
        }
      }
    }
  }
}
</style>